<template>
    <div id="app" style="position: relative">
        <a-spin class="p-center" :spinning="spinning" size="large"></a-spin>
        <a-config-provider
            :locale="zh_CN"
            :getPopupContainer="getPopupContainer"
            :transformCellText="transformCellText"
        >
            <router-view></router-view>
        </a-config-provider>
    </div>
</template>

<script>
import zh_CN from 'ant-design-vue/lib/locale-provider/zh_CN'
import Bus from './common/bus.js'
import { getApplyState } from '@/common/api/applyManage.js'
import ellipsis from 'simply-ellipsis'
export default {
    name: 'App',
    data() {
        return {
            zh_CN,
            transformCellText: e => {
                let { text, column } = e
                if (typeof text === 'string') {
                    text = text.trim() ? text : ''
                }
                // 行展开时，会出现多余的'-'
                if (column.key === 'expand-icon-placeholder') {
                    return
                }
                return text === 0 ? 0 : text || '-'
            },
            getPopupContainer: node => {
                if (node && node.classList.contains('dropdown-render-parent')) {
                    return node.parentNode
                }
                return document.body
            },
            spinning: false,
            spinningTime: null,
        }
    },
    mounted() {
        ellipsis.setEll()
        ellipsis.setObserver('app')
        Bus.$on('loadingStateChange', boole => {
            let currentTime = +new Date()
            if (boole) {
                // 60秒之后，强制关闭
                setTimeout(() => {
                    this.spinning = false
                }, 6 * 1000)
                this.spinningTime = currentTime
                this.spinning = boole
            } else {
                //加载不足一秒，强制变更为一秒
                if (currentTime - this.spinningTime > 1 * 1000) {
                    this.spinning = boole
                } else {
                    setTimeout(() => {
                        this.spinning = boole
                    }, 1000 - (currentTime - this.spinningTime))
                }
            }
        })
        getApplyState().then(res => {
            console.log(res)
            if (res.code == 200) {
                this.$store.commit('setApplyState', res.data)
            }
        })
    },
}
</script>

<style lang="scss">
@import 'assets/styles/main';
#app {
    font-family: AlibabaPuHuiTiR;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
    width: 100%;
    height: 100%;
}
</style>
